<template>
  <div>
    <div class="d-flex fs-3 justify-content-center fws-zdy-sele my-4">
      <div
        class="p-2 mx-3"
        @click="showborder1"
        :class="{ active: active == false }"
      >
        教育资讯
      </div>
      <div
        class="p-2 mx-3"
        @click="showborder2"
        :class="{ active: active == true }"
      >
        实时动态
      </div>
    </div>
    <div class="m-auto text-center">
      <img src="/home_tit3.png" class="w-25" />
    </div>
    <!-- 资讯card -->
    <div class="container mt-5" v-if="!active">
      <div class="row">
        <div class="col-lg-4 col-12 text-center px-4">
          <div
            class="shadow-lg px-5 py-2 w-100 bg-danger m-auto bg-body rounded-3"
          >
            <h3 class="fs-4 fw-bold my-3">小学教育资讯</h3>
            <img src="/Rotate_2.jpg" class="w-100 rounded-3" />

            <div class="accordion my-4" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                  <button
                    class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseOne"
                    aria-expanded="true"
                    aria-controls="collapseOne"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapseOne"
                  class="accordion-collapse collapse show"
                  aria-labelledby="headingOne"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Tempore, quod.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo"
                    aria-expanded="false"
                    aria-controls="collapseTwo"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapseTwo"
                  class="accordion-collapse collapse"
                  aria-labelledby="headingTwo"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat, aliquam!
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseThree"
                    aria-expanded="false"
                    aria-controls="collapseThree"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapseThree"
                  class="accordion-collapse collapse"
                  aria-labelledby="headingThree"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Hic, nulla.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-12 text-center px-4">
          <div
            class="shadow-lg px-5 py-2 w-100 bg-danger m-auto bg-body rounded-3"
          >
            <h3 class="fs-4 fw-bold my-3">初中教育资讯</h3>
            <img src="/Rotate_2.jpg" class="w-100 rounded-3" />

            <div class="accordion my-4" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header" id="headinga">
                  <button
                    class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapsea"
                    aria-expanded="true"
                    aria-controls="collapsea"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapsea"
                  class="accordion-collapse collapse show"
                  aria-labelledby="headinga"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Tempore, quod.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingb">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseb"
                    aria-expanded="false"
                    aria-controls="collapseb"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapseb"
                  class="accordion-collapse collapse"
                  aria-labelledby="headingb"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat, aliquam!
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingc">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapsec"
                    aria-expanded="false"
                    aria-controls="collapsec"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapsec"
                  class="accordion-collapse collapse"
                  aria-labelledby="headingc"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Hic, nulla.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-12 text-center px-4">
          <div
            class="shadow-lg px-5 py-2 w-100 bg-danger m-auto bg-body rounded-3"
          >
            <h3 class="fs-4 fw-bold my-3">高中教育资讯</h3>
            <img src="/Rotate_2.jpg" class="w-100 rounded-3" />

            <div class="accordion my-4" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading1">
                  <button
                    class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse1"
                    aria-expanded="true"
                    aria-controls="collapse1"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapse1"
                  class="accordion-collapse collapse show"
                  aria-labelledby="heading1"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Tempore, quod.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading2">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse2"
                    aria-expanded="false"
                    aria-controls="collapse2"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapse2"
                  class="accordion-collapse collapse"
                  aria-labelledby="heading2"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat, aliquam!
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading3">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse3"
                    aria-expanded="false"
                    aria-controls="collapse3"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapse3"
                  class="accordion-collapse collapse"
                  aria-labelledby="heading3"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Hic, nulla.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 实时动态card -->
    <div class="container mt-5" v-else-if="active">
      <div class="row">
        <div class="col-lg-4 col-12 text-center px-4">
          <div
            class="shadow-lg px-5 py-2 w-100 bg-danger m-auto bg-body rounded-3"
          >
            <h3 class="fs-4 fw-bold my-3">最新教育资讯</h3>
            <img src="/Rotate_2.jpg" class="w-100 rounded-3" />

            <div class="accordion my-4" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                  <button
                    class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseOne"
                    aria-expanded="true"
                    aria-controls="collapseOne"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapseOne"
                  class="accordion-collapse collapse show"
                  aria-labelledby="headingOne"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Tempore, quod.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo"
                    aria-expanded="false"
                    aria-controls="collapseTwo"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapseTwo"
                  class="accordion-collapse collapse"
                  aria-labelledby="headingTwo"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat, aliquam!
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseThree"
                    aria-expanded="false"
                    aria-controls="collapseThree"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapseThree"
                  class="accordion-collapse collapse"
                  aria-labelledby="headingThree"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Hic, nulla.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-12 text-center px-4">
          <div
            class="shadow-lg px-5 py-2 w-100 bg-danger m-auto bg-body rounded-3"
          >
            <h3 class="fs-4 fw-bold my-3">最新教育资讯</h3>
            <img src="/Rotate_2.jpg" class="w-100 rounded-3" />

            <div class="accordion my-4" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header" id="headinga">
                  <button
                    class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapsea"
                    aria-expanded="true"
                    aria-controls="collapsea"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapsea"
                  class="accordion-collapse collapse show"
                  aria-labelledby="headinga"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Tempore, quod.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingb">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseb"
                    aria-expanded="false"
                    aria-controls="collapseb"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapseb"
                  class="accordion-collapse collapse"
                  aria-labelledby="headingb"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat, aliquam!
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingc">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapsec"
                    aria-expanded="false"
                    aria-controls="collapsec"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapsec"
                  class="accordion-collapse collapse"
                  aria-labelledby="headingc"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Hic, nulla.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-12 text-center px-4">
          <div
            class="shadow-lg px-5 py-2 w-100 bg-danger m-auto bg-body rounded-3"
          >
            <h3 class="fs-4 fw-bold my-3">最新教育资讯</h3>
            <img src="/Rotate_2.jpg" class="w-100 rounded-3" />

            <div class="accordion my-4" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading1">
                  <button
                    class="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse1"
                    aria-expanded="true"
                    aria-controls="collapse1"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapse1"
                  class="accordion-collapse collapse show"
                  aria-labelledby="heading1"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Tempore, quod.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading2">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse2"
                    aria-expanded="false"
                    aria-controls="collapse2"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapse2"
                  class="accordion-collapse collapse"
                  aria-labelledby="heading2"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Placeat, aliquam!
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading3">
                  <button
                    class="accordion-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse3"
                    aria-expanded="false"
                    aria-controls="collapse3"
                  >
                    Lorem, ipsum dolor.
                  </button>
                </h2>
                <div
                  id="collapse3"
                  class="accordion-collapse collapse"
                  aria-labelledby="heading3"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Hic, nulla.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片 -->
    <div class="container ">
      <img src="/pic1.png" class="d-block m-auto w-100 shadow-lg  my-5">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
      selected: "",
    };
  },
  methods: {
    showborder1() {
      this.active = false;
    },
    showborder2() {
      this.active = true;
    },
    showlist() {
      this.selected = true;
    },
    hiddenlist() {
      this.selected = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  border-bottom: 4px solid orangered;
}
.fws-zdy-sele {
  user-select: none;
}
.fws-zdy-textcolor {
  li {
    text-align: start;
    a {
      font-size: 18px;
      color: #000 !important;
      &:hover {
        color: orangered !important;
      }
    }
  }
}
</style>
